<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="ap"></div>
    <div id="app"></div>
<script crossorigin src="./babel.js">/* react.js */</script>
<script crossorigin src="./react.js">/* react-dom*/</script>
<script src="./react-dom.js"></script>
<script type="text/babel">
class ShoppingList extends React.Component{
    render(){
        return (<div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>)
    }
}
class Square extends React.Component {
    render(){
        return (
        <button className="square">
        {this.props.value}    
        </button>
    );
    }
}
class Board extends React.Component {
    renderSquare(i){
        return <Square value ={i} />
    }
    render(){
        const status = 'Next Player'
        return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
    }
}
    const b1 =  React.createElement('b',{name:'b'},'这是一个b标签')
    // 类型 属性（驼峰命名） 内容（可以是虚拟dom） 返回一个虚拟dom
    const pre1 = React.createElement('pre', {contentEditable:true}, b1)
    console.log(pre1,b1)
    ReactDOM.render(pre1,document.getElementById('ap'))// 虚拟doM, 目标容器， 回调函数
    //jsx -> js + XML 用JS添加XML的扩展，既不是模板字符串，也不是 HTML模板
    let circle =  <svg width="100" viewBox="0 0 30 30">
        <circle cx="50%" cy="50%" r = "10" fill="#de2316"></circle>
    </svg>
    ReactDOM.render(circle, document.getElementById('ap'))
    //直接这么写，结果容器里只有被渲染的节点，直接写在html里的也没有了
    ReactDOM.render(<Board />, document.getElementById('app'))
</script>
</body>
</html>